<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * @ignore
 * root node represent a simple tree
 * @author yiminghe@gmail.com
 */
KISSY.add(&quot;tree/control&quot;, function (S, TreeNode, TreeManager) {
    /*多继承
     1. 继承基节点（包括可装饰儿子节点功能）
     2. 继承 mixin 树管理功能
     3. 继承 mixin 儿子事件代理功能
     */

<span id='KISSY-Tree'>    /**
</span>     * KISSY Tree. xclass: 'tree'.
     * @class KISSY.Tree
     * @extends KISSY.Tree.Node
     */
    return TreeNode.extend([TreeManager], {
        handleKeyDownInternal: function (e) {
            var current = this.get(&quot;selectedItem&quot;);
            if (current === this) {
                return this.callSuper(e);
            }
            return current &amp;&amp; current.handleKeyDownInternal(e);
        },

        _onSetFocused: function (v) {
            var self = this;
           self.callSuper(v);
            // 得到焦点时没有选择节点
            // 默认选择自己
            if (v &amp;&amp; !self.get(&quot;selectedItem&quot;)) {
                self.select();
            }
        }
    }, {
        ATTRS: {
            defaultChildCfg: {
                value: {
                    xclass: 'tree-node'
                }
            }
        },
        xclass: 'tree'
    });
}, {
    requires: ['./node', './tree-manager']
});

/*
 Refer:
 - http://www.w3.org/TR/wai-aria-practices/#TreeView

 note bug:
 1. checked tree 根节点总是 selected ！
 2. 根节点 hover 后取消不了了



 支持 aria
 重用组件框架
 键盘操作指南

 tab 到树，自动选择根节点

 上下键在可视节点间深度遍历
 左键
 已展开节点：关闭节点
 已关闭节点: 移动到父亲节点
 右键
 已展开节点：移动到该节点的第一个子节点
 已关闭节点: 无效
 enter : 触发 click 事件
 home : 移动到根节点
 end : 移动到前序遍历最后一个节点
 */</pre>
</body>
</html>
